<template>
  <div class="login">

    <div class="head">
      <span class="dengl">账号密码登录</span>
      <span class="kuai" @click="toKuai">快捷登录</span>
    </div>

    <div class="inputs">
      <input type="text" v-model="usernum" placeholder="请输入账号" class="zhk"><br>
      <input type="text" v-model="userpass" placeholder="请输入密码"><br>
      <van-button size="large" @click="login()" class="anniu">登录</van-button>
    </div>

    <div class="zhuce">
      <span class="zc" @click="$router.push('/register')">点击注册</span>
      <span class="wj">忘记密码</span>
    </div>

    <van-divider>其他登录</van-divider>

    <div class="imgs">
      <img src="@/assets/image/qq.png" alt="">
      <img src="@/assets/image/weixin.png" alt="">
      <img src="@/assets/image/weibo.png" alt="">
    </div>


  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
        usernum:'',
        userpass:''
    }
  },
 created ( ) {
   let redirect = this.$route.query.redirect
   if( redirect == 1 ) {
      this.$toast('请先登录')
   }
},
  methods: {
    login() {
      let usernum = this.usernum
      let userpass = this.userpass
      if (usernum && userpass) {//非空判断
        // 发送 POST 请求
        axios({
          method: 'post',
          url: '/api/member/login',
          data: {
            username:usernum,
            password:userpass
          }
        }).then(res=>{
            if(res.data.resultCode == 1){
              //登录成功回显
              console.log(res.data);
              this.$toast.success('登录成功')
              //保存数据到vuex
              let user = res.data.resultInfo
              this.$store.dispatch('saveUser',user)
              //保存token到localStorage
              localStorage.setItem('token',JSON.stringify(res.data.token))
              // console.log('store数据',this.$store.getters.user);
              //定时跳转到主页
              setTimeout(()=>{
                this.$router.replace('/main')
              },2000)

            }else{
              //登录失败回显
              this.$toast.fail('登录失败,请重试')
            }
        }).catch(err=>{
          console.log(err);
          this.$toast.fail('登录出错')
        })
      }else{
        this.$toast('请输入账号或密码')
      }
    },
    toKuai() {
      this.$router.push('/loginkuai')
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  padding-top: 30%;

  .head {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
}

.login .dengl {
  font-size: 20px;
  padding-right: 10px;
}

.login .kuai {
  color: #999999;
}

.login {
  .inputs {
    margin: 0 auto;
    display: flex;
    width: 80%;
    flex-direction: column;

    input {
      margin-top: 30px;
      border: 0px solid #000;
      border-bottom: 1px solid #000;
      line-height: 30px;
    }

    .anniu {
      background-color: #1890FF;
      width: 100%;
      height: 40px;
      border-radius: 40px;
      margin-top: 30px;
      color: #fff;
    }
  }
}
.zc {
  margin-right: 40px;
  color: #1890FF;
}

.zhuce {
  margin-top: 10px;
  color: #1890FF;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.zhk {
  margin-top: 40px;
}

.qtdl {
  margin-top: 100px;
}

.qtdl .qt {
  font-size: 10px;
}

.login .imgs {
  width: 100%;
  display: flex;
  justify-content: space-around;

  img {
    width: 40px;
  }
}
</style>
